<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJsLearn4</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
</head>
<body>
    <div id="app" class="container" style="margin-top: 20px;">
        <ty-panel></ty-panel>
    </div>
    <template id="ty-panel">
        <div class="row">
            <div class="row">
                <form class="form-inline text-right">
                    <input type="text" class="form-control" v-model="message" />
                    <input type="button" class="btn btn-success" value="查询" />
                </form>
            </div>
            <div class="row" style="margin-top: 10px;">
                <ty-list v-bind:haha.sync="message"></ty-list>
            </div>
            <div class="row" style="margin-top: 10px;">
                <form class="form-inline text-right">
                    <input type="text" class="form-control" />
                    <input type="button" class="btn btn-primary" value="添加" />
                </form>
            </div>
        </div>
    </template>
    <template id="ty-list">
        <div>
            <input type="text" class="form-control" v-model="haha" />
            <select class="form-control" multiple>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
        </div>
    </template>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var ty_list = Vue.extend({
            template: "#ty-list",
            props: ["haha"]
        });
        var ty_panel = Vue.extend({
            template: "#ty-panel",
            data: function () {
                return {
                    message: "你好，少时诵诗书"
                };
            },
            components: {
                "ty-list": ty_list
            }
        });
        Vue.component("ty-panel", ty_panel);
        var myApp = new Vue({
            el: "#app"
        });
    </script>
</body>
</html>